<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My club</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style/association.css') }}">
</head>

<body>
    <div class="ass">
        <div class="ass-con">
            <div class="ass-header">
                <div class="ass-left">
                    <div>
                        <span class="ass-logo">logo</span>
                        <span class="ass-school">{{ school }}</span>
                    </div>
                    <div class="ass-center">
                        <p class="ass-pic-c">
                            <img src="{{ url_for('get_avatar', filename=user.avatar) }}" alt="">
                        </p>
                        <p class="ass-hi">Hi, {{ user.name }}</p>
                    </div>
                </div>
                <div class="ass-right">
                    <input class="ass-input" type="text" placeholder="search">
                    <a href="{{ url_for('auth.login') }}">
                        <button class="sign-in-btn">Sign Out</button>
                    </a>
                </div>
            </div>
            <div class="ass-contents">
                <div class="ass-content">
                    <div class="find-teacher">
                        <div class="find-teacher-header">
                            <p>Find your teacher</p>
                            <div class="language-cons">
                                <p class="language-header">
                                    <span>English</span>
                                    <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                        <path
                                            d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                        </path>
                                    </svg>
                                </p>
                                <div class="language">
                                    <p class="active">
                                        <span>English</span>
                                        <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                    </p>
                                    <p>
                                        <span>chinese</span>
                                        <img src="{{ url_for('static', filename='img/008.svg') }}" alt="">
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="find-teacher-lists">
                            {% for teacher in teachers %}
                                <div class="find-teacher-list">
                                    <p class="find-teacher-left">
                                        <span class="find-teacher-circle"></span>
                                        {{ teacher.name }}
                                    </p>
                                    <p class="find-teacher-con">
                                        {{ teacher.post }}
                                    </p>
                                    <img src="{{ url_for('static', filename='img/003.svg') }}" alt="">
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="my-friends">
                        <p class="my-friends-title">My friends</p>
                        <div class="my-friends-lists">
                            {% for friend in friends %}
                                <div class="my-friends-list">
                                    <div class="my-friends-list-left">
                                        <span class="my-friends-circle"></span>
                                        <div>
                                            <p class="my-friends-name">{{ friend.name }}</p>
                                            <p class="my-friends-num">{{ friend.email }}</p>
                                        </div>
                                    </div>
                                    <img src="{{ url_for('static', filename='img/004.svg') }}" alt="">
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="my-group">
                        <p class="my-group-title">My group</p>
                        <div class="my-group-con">
                            <div class="my-group-list">
                                <div>
                                    <p class="my-group-circle"></p>
                                    <p class="my-group-titles"> Taekwondo Club</p>
                                    <p class="my-group-tip">Club training at 3pm
                                        this Saturday….</p>
                                    <p>
                                        <img src="{{ url_for('static', filename='img/009.svg') }}" alt="">
                                    </p>
                                    <p>
                                        <button class="sign-up-btn">
                                            Sign up
                                        </button>
                                    </p>
                                </div>
                            </div>
                            <div class="my-group-list">
                                <div>
                                    <p class="my-group-circle"></p>
                                    <p class="my-group-titles"> Taekwondo Club</p>
                                    <p class="my-group-tip">Club training at 3pm
                                        this Saturday….</p>
                                    <p>
                                        <img src="{{ url_for('static', filename='img/009.svg') }}" alt="">
                                    </p>
                                    <p>
                                        <button class="sign-up-btn">
                                            Sign up
                                        </button>
                                    </p>
                                </div>
                            </div>
                            <div class="my-group-list">
                                <div>
                                    <p class="my-group-circle"></p>
                                    <p class="my-group-titles"> Taekwondo Club</p>
                                    <p class="my-group-tip">Club training at 3pm
                                        this Saturday….</p>
                                    <p>
                                        <img src="{{ url_for('static', filename='img/009.svg') }}" alt="">
                                    </p>
                                    <p>
                                        <button class="sign-up-btn">
                                            Sign up
                                        </button>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="community">
                        <p class="community-title">Community news</p>
                        <div class="community-list">
                            <p class="community-titles">
                                Class reminder
                            </p>
                            <p class="community-tip">There will be a video lesson from the professor in an hour </p>
                        </div>
                        <div class="community-list">
                            <p class="community-titles">
                                exam reminder
                            </p>
                            <p class="community-tip">There will be a video lesson from the professor in an hour </p>
                        </div>
                        <div class="community-list">
                            <p class="community-titles">
                                homework submission reminder
                            </p>
                            <p class="community-tip">There will be a video lesson from the professor in an hour </p>
                        </div>
                        <div class="community-list">
                            <p class="community-titles">
                                school start
                            </p>
                            <p class="community-tip">
                                March 21, 2021—July 1, 2021
                            </p>
                        </div>
                        <div class="community-list">
                            <p class="community-titles">
                                holiday
                            </p>
                        </div>
                    </div>
                </div>
                <div class="ass-side">
                    <ul class="ass-side-list">
                        <li>
                            <a href="{{ url_for('student.course') }}">
                                <span class="ass-icon"></span>
                                my course
                            </a>
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            my task
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            notification
                        </li>
                        <li>
                            <a href="{{ url_for('student.timetable') }}">
                                <span class="ass-icon"></span>
                                timetable
                            </a>
                        </li>
                    </ul>
                    <ul class="ass-side-list">
                        <li>
                            <a href="{{ url_for('student.grade') }}">
                                <span class="ass-icon"></span>
                                grades
                            </a>
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            homework
                        </li>
                    </ul>
                    <ul class="ass-side-list">
                        <li class="active">
                            <a href="{{ url_for('student.social') }}">
                                <span class="ass-icon"></span>
                                Social
                            </a>
                        </li>
                        <li class="no-open">
                            <span class="ass-icon"></span>
                            Societies
                        </li>
                    </ul>
                    <div class="ass-workplace">
                        <p>workplace</p>
                        <button>
                            <span>forum</span>
                            <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                <path
                                    d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                </path>
                            </svg>
                        </button>
                        <button>
                            <span>My upload</span>
                            <svg class="down" viewBox="0 0 32 32" width="100%" height="100%">
                                <path
                                    d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                </path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>